<!-- 告诉浏览器处理的是HTML文档;标记文档内容的HTML所属的版本;
    该元素没有结束标签;HTML文档的开头;-->
<!DOCTYPE html>
<!-- 根元素，表示文档中HTML部分的开始 -->
<html>
<!-- 文档的元数据，必须有一个title元素，父元素html -->

<head>
    <!-- 文档标题，父元素head -->
    <title>Example</title>
    <!-- 设置一个基准URL，父元素head，虚元素，没有内容-->
    <base href="" target="" />
    <!-- 定义文档的各种元数据 父元素head，虚元素，没有内容
        指定名/值元数据对；name属性表示元数据类型，content属性提供值
        可以使用元数据扩展-->
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <!-- robots---HTML文档的作者可以用它告诉搜索引擎如何对待该文档，noindex不要索引本页 -->
    <meta name="robots" content="noindex">
    <!-- 声明字符编码 -->
    <meta charset="utf-8">
    <!-- 模拟HTTP表头字段 http-equiv指定字段名称，content指定字段值，浏览器每隔5s再次载入页面
        default-style--指定页面优先使用的样式表；
    -->
    <!-- <meta http-equiv="refresh" content="5"> -->
    <!-- 定义HTML文档内嵌的CSS样式 父元素：任何可包含元数据元素的元素
        media可规定设备类型的值;media可以设计更具体的使用条件 AND NOT OR/,-->
    <!-- 打印文当用这种样式 -->
    <style media="print" type="text/css">
        a {
            color: red;
            font-weight: bold;
            font-style: italic;
        }
    </style>
    <!-- 浏览器的宽度和高度，单位px -->
    <style media="screen AND (max-width: 500px)" type="text/css">
        a {
            background-color: grey;
            color: white;
            padding: 0.5em;
        }
    </style>
    <style media="screen AND (min-width: 500px)" type="text/css">
        a {
            color: red;
            font-style: italic;
        }
    </style>
    <!-- 整个设备的宽度和高度，单位px -->
    <style media="screen AND (max-device-width: 500px)" type="text/css">
        a {
            background-color: blue;
            color: white;
            padding: 0.5em;
        }
    </style>
    <style media="screen AND (min-device-width: 500px)" type="text/css">
        a {
            background-color: orange;
            font-style: italic;
        }
    </style>
    <!-- link元素可用来在HTML文档和外部资源之间建立联系，虚元素，没有内容-->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <!-- 为页面定义网站标志 -->
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <!-- 预先获取关联的资源，为用户点击某个链接以执行其他需要这个页面的操作做好准备
        写书时只有Firefox支持-->
    <link rel="prefetch" href="./README.md">
    <!-- 加入脚本，通常是JavaScript脚本 -->
    <script>
        document.write("This is from the script");
    </script>
    <!-- 载入外部脚本 -->
    <script src="./js/simple.js"></script>
    <!-- 放在前面找不到元素id -->
    <!-- <script src="./js/simple2.js"></script> -->
    <!-- defer会将脚本的加载和执行推迟到HTML文档所有元素都解析之后 -->
    <!-- <script defer src="./js/simple2.js"></script> -->
    <!-- 异步执行脚本 async 
        例如tracking script可以回报用户的网站访问记录以便广告公司根据用户的浏览习惯定制和投放广告
        或者收集网站访问者的统计数据以供分析等等-->
    <script async src="./js/simple2.js"></script>
    <!-- noscript可以用来向禁用的js或浏览器不支持js的用户显示一些内容 -->
    <noscript>
        <h1>JavaScript is required!</h1>
        <p>You cannot use this page without Javascript</p>
        <!-- 重定向至浏览器 -->
        <meta http-equiv="refresh" content="0; http://www.apress.com"/>
    </noscript>
</head>
<!-- 文档的内容 -->

<body>
    <p>I like <code id="applecode">apples</code> and oranges.</p>
    <a href="http://apress.com">Visit Apress.com</a>
    <!-- 拼接page2.html，组成完整URL---(base)/page2.html -->
    <a href="README.md">README.md</a>
    <!-- 可以放在body的最后 -->
    <!-- <script src="./js/simple2.js"></script> -->
</body>

</html>